<template>
    <div class="goods-more-project-detail">
        <div class="title-box">
            <span class="s-tit">{{ title }}</span>
        </div>
        <div class="project-detail">
            <el-tabs v-model="tabId">
                <el-tab-pane
                    :label="item.tabTitle"
                    :name="item.id"
                    v-for="item in desc.tab_ls"
                    :key="item.id"
                >
                    <div
                        class="project-detail-row"
                        v-for="item2 in item.item_ls"
                        :key="item2.itemId"
                    >
                        <div class="detail-coler">
                            <i
                                class="el-icon-close"
                                @click="delAttrFun(item.item_ls, item2.itemId)"
                            ></i>
                        </div>
                        <addPhoto
                            ref="addPhoto"
                            :actType="2"
                            :pList="item2.img_ls"
                            :parentIdx="item2.itemId"
                            :tabId="tabId"
                            :itemId="item2.itemId"
                            :is_good_type="2"
                            @deiimgFun="deiimgFun"
                        ></addPhoto>
                        <div class="txt-box">
                            <el-input
                                type="textarea"
                                placeholder="请输入内容"
                                v-model="item2.txt"
                                maxlength="2000"
                                show-word-limit
                            >
                            </el-input>
                        </div>
                    </div>
                    <div class="add-box">
                        <el-button @click="addAttrFun(item)"
                            >添加一块图文</el-button
                        >
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import goodsCtrl from "../../js/project/GoodsCtrl.js";
import addPhoto from "../comm/AddPhoto.vue";
import config from "../../js/conf/Config.js";
import uploadPic from "../../js/upload/UploadPic.js";
import staticConst from "@/js/const/StaticConst.js";
import localStore from "@/js/LocalStore.js";

export default {
    name: "goodsMoreProjectDetail",
    components: { addPhoto },
    props: ["imgData"],
    data() {
        return {
            title: "更多详情",
            tabId: "",
            textarea: "",
            desc: {
                tab_ls: [],
            },
        };
    },
    methods: {
        async initData(type, is_draft) {
            // type = 1(新增) 2(编辑)
            if (is_draft == 1) {
                let draftDesc = await localStore.getGoodsDraft("2"); //是否有草稿
                this.desc.tab_ls = draftDesc.desc.tab_ls
                    ? draftDesc.desc.tab_ls
                    : draftDesc.desc;
                this.tabId = this.desc.tab_ls[0].id;
            } else {
                this.getAttrList(type);
            }
        },
        async getAttrList(type) {
            let url = config.PROPRE_ATTR_LS;
            let param = {
                status: "1",
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data) {
                let attrData = res.data.attr_ls || [];
                if (type == 1) {
                    attrData.map((v) => {
                        v.tabTitle = v.title;
                        v.item_ls = [
                            {
                                img_ls: [
                                    {
                                        url: "",
                                        imgs_base: "",
                                        imgs: "",
                                        isDel: false,
                                    },
                                ],
                                itemId: 0,
                                tabId: v.id,
                                txt: "",
                            },
                        ];
                    });
                    this.desc.tab_ls = attrData;
                    this.tabId = attrData[0].id;
                    goodsCtrl.setDerData("desc", this.desc);
                } else {
                    let editDesc = goodsCtrl.getDatacom("desc") || [];
                    let attrData = res.data.attr_ls || [];
                    if (editDesc.length > 0) {
                        editDesc.map((v) => {
                            v.tabTitle = v.title;
                            if (v.item_ls) {
                                v.item_ls.map((vs, is) => {
                                    vs.itemId = is;
                                    vs.tabId = v.id;
                                    if (vs.img_ls) {
                                        vs.img_ls.map((vw, iw) => {
                                            vw.imgId = iw;
                                            vw.index = iw;
                                            vw.itemId = vs.itemId;
                                            vw.tabId = vs.tabId;
                                            vw.url = vw.path;
                                        });
                                    } else {
                                        vs.img_ls = [];
                                    }
                                    if (vs.img_ls.length < 9) {
                                        vs.img_ls[vs.img_ls.length] = {
                                            url: "",
                                            imgs_base: "",
                                            imgs: "",
                                            isDel: false,
                                        };
                                    }
                                });
                            }
                        });
                    }
                    if (attrData.length > 0) {
                        let attr = attrData.filter((v) => {
                            return editDesc.every((e) => e.id != v.id);
                        });
                        attr.map((v) => {
                            v.tabTitle = v.title;
                            v.item_ls = [
                                {
                                    img_ls: [
                                        {
                                            url: "",
                                            imgs_base: "",
                                            imgs: "",
                                            isDel: false,
                                        },
                                    ],
                                    itemId: 0,
                                    tabId: v.id,
                                    txt: "",
                                },
                            ];
                        });
                        if (attr.length > 0) {
                            attr.map((v) => {
                                editDesc.push(v);
                            });
                        }
                    }
                    this.tabId = editDesc[0].id;
                    this.desc.tab_ls = editDesc;
                }
            }
        },
        // 添加一块图文
        addAttrFun(data) {
            let index = data.item_ls
                ? data.item_ls[data.item_ls.length - 1].itemId
                : -1;
            index++;

            if (data.item_ls) {
                data.item_ls.push({
                    img_ls: [
                        {
                            url: "",
                            imgs_base: "",
                            imgs: "",
                            isDel: false,
                        },
                    ],
                    itemId: index,
                    tabId: data.id,
                    txt: "",
                });
            } else {
                data.item_ls = [
                    {
                        img_ls: [
                            {
                                url: "",
                                imgs_base: "",
                                imgs: "",
                                isDel: false,
                            },
                        ],
                        itemId: index,
                        tabId: data.id,
                        txt: "",
                    },
                ];
            }

            goodsCtrl.setDerData("desc", this.desc);
        },
        // 删除一块
        delAttrFun(data, id) {
            if (data.length == 1) return;
            data.map((v, i) => {
                if (v.itemId == id) {
                    data.splice(i, 1);
                }
            });
            goodsCtrl.setDerData("desc", this.desc);
        },
        confirm(data) {
            uploadPic.creatCanvas(data.tempFilePath, data.original, null);
        },
        // 处理图片数据
        getimgData(data, type = 1) {
            console.log("getimgData():", data, type);
            this.desc.tab_ls.map((v) => {
                if (v.id == data.tabId) {
                    v.item_ls.map((vs) => {
                        if (vs.itemId == data.itemId) {
                            vs.img_ls.map((vw, i) => {
                                if (vw.index == data.index) {
                                    if (type == 1) {
                                        console.log("vw==:", vw, "vs==:", vs);
                                        vw.imgId = data.index;
                                        vw.itemId = data.itemId;
                                        vw.tabId = data.tabId;
                                        vw.url = data.url;
                                        vw.path_s =
                                            data.url +
                                            staticConst.PHOTO_OSS_SMALL_160;
                                        vw.path_base = data.name;
                                        vw.path =
                                            data.url +
                                            staticConst.PHOTO_OSS_BIG_1280;
                                    } else {
                                        if (
                                            vs.img_ls.length == 9 &&
                                            vs.img_ls[vs.img_ls.length - 1].url
                                        ) {
                                            vs.img_ls.push({
                                                url: "",
                                                imgs_base: "",
                                                imgs: "",
                                                isDel: false,
                                            });
                                        }
                                        vs.img_ls.splice(i, 1);
                                    }
                                }
                            });

                            vs.img_ls.map((vw, i) => {
                                if (vw.url) vw.index = i;
                            });
                        }
                    });
                }
            });
            goodsCtrl.setDerData("desc", this.desc);
        },
        // 删除某个图片
        deiimgFun(item) {
            this.getimgData(item, 2);
        },
    },
};
</script>

<style lang="scss" scoped>
.goods-more-project-detail {
    .title-box {
        margin-bottom: 10px;
        font-weight: bold;
        font-size: 14px;
    }
    .project-detail {
        .project-detail-row {
            padding: 10px;
            border: 1px solid #ececec;
            margin-bottom: 10px;
            .detail-coler {
                font-size: 20px;
                display: flex;
                justify-content: flex-end;
                cursor: pointer;
            }
            .txt-box {
                margin-top: 20px;
            }
        }
        ::v-deep.add-box {
            margin-top: 10px;
            width: 100%;
            .el-button {
                width: 100%;
                color: #3989fc;
                border-color: #ececec;
            }
        }
    }
}
</style>